import React, { memo, useState, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { SongPageRightWrap } from "./style";
import { getSimiSongAction, simiPlaylistAction } from "../store/actionTypes";
import { getSizeImage } from "@/utils/format-utils";
import { NavLink } from "react-router-dom";
import Deploy from "@/components/deploy";
import {
  addSongId,
  getSongDetailsMessage,
} from "../../../pages/player/store/actionType";

export default memo(function SongRight(props) {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getSimiSongAction(props.id));
    dispatch(simiPlaylistAction(props.id));
  }, [dispatch]); // eslint-disable-line react-hooks/exhaustive-deps
  const state = useSelector(
    (state) => ({
      simiSong: state.getIn(["songPage", "simiSong"]),
      simiPlaylist: state.getIn(["songPage", "simiPlaylistInfo"]),
    }),
    shallowEqual
  );
  const simiSong = state.simiSong.code == 200 && state.simiSong;

  const addSongs = (id) => {
    if (id != undefined) {
      dispatch(addSongId(id));
    }
  };

  const getMusicLists = (id) => {
    dispatch(getSongDetailsMessage(id));
    dispatch(addSongId(id));
  };

  return (
    <SongPageRightWrap>
      <div className="song-right-top">
        {state.simiPlaylist.length !== 0 ? (
          state.simiPlaylist.playlists.length !== 0 ? (
            <div className="contain-playlist">
              <Deploy
                title={"包含这首歌的歌单"}
                hotPlaylists={
                  state.simiPlaylist.code === 200 ? state.simiPlaylist : ""
                }
              />
            </div>
          ) : (
            ""
          )
        ) : (
          ""
        )}
        <p>相似歌曲</p>
        <ul>
          {simiSong
            ? simiSong.songs.map((item, index) => {
                return (
                  <li key={item.privilege.id}>
                    <div className="song-right-flex clear">
                      <span>
                        <NavLink
                          to={{
                            pathname: "/song",
                            search: "?id=" + item.privilege.id,
                          }}
                        >
                          {item.name}
                        </NavLink>
                      </span>
                      <span>
                        {item.artists.map((itema, indexa) => {
                          return indexa === 0 ? (
                            <NavLink
                              key={itema.id}
                              to={{
                                pathname: "/artist",
                                search: "?id=" + itema.id,
                              }}
                            >
                              {itema.name}
                            </NavLink>
                          ) : (
                            <React.Fragment key={itema.id}>
                              /
                              <NavLink
                                to={{
                                  pathname: "/artist",
                                  search: "?id=" + itema.id,
                                }}
                              >
                                {itema.name}
                              </NavLink>
                            </React.Fragment>
                          );
                        })}
                      </span>
                    </div>
                    <div className="bfadd clear">
                      <i
                        onClick={() => getMusicLists(item.privilege.id)}
                        className="song-right-play-btn icon2"
                      ></i>
                      <i
                        onClick={() => addSongs(item.privilege.id)}
                        className="song-right-add-btn icon2"
                      ></i>
                    </div>
                  </li>
                );
              })
            : ""}
        </ul>
      </div>
    </SongPageRightWrap>
  );
});
